<link rel="stylesheet" href="css/index.css"/>
<script src="js/jquery-3.4.1.js"></script>
<script src="js/vue.js"></script>
<script src="js/axios.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="js/menu.js"></script>

<div id="app" style="height: 100%;">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item :to="{ path: '/' }">位置</el-breadcrumb-item>
    <el-breadcrumb-item>仓管管理</el-breadcrumb-item>
    <el-breadcrumb-item>库存查询</el-breadcrumb-item>
  </el-breadcrumb>
  <br/>
  <el-form :inline="true" :data="form" class="demo-form-inline">
    <el-form-item label="产品编号:">
      <el-input v-model="form.productCode" clearable  placeholder="产品编号" style="width: 160px;"></el-input>
    </el-form-item>
    <el-form-item label="产品名称:">
      <el-input v-model="form.productName" clearable  placeholder="产品名称" style="width: 160px;"></el-input>
    </el-form-item>
    <el-form-item label="库存数量最小值:">
      <el-input v-model="form.minNum" clearable  placeholder="请输入库存数量范围" style="width: 160px;"></el-input>
    </el-form-item>
    <el-form-item label="库存数量最大值:">
      <el-input v-model="form.maxNum" clearable  placeholder="请输入库存数量范围" style="width: 160px;"></el-input>
    </el-form-item>

    <el-form-item>
      <el-button type="primary"  size="middle"  @click="search">查询</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"  size="middle" @click="clear">清空查询</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="tableData" height="350px" border style="width: 100%">
    <el-table-column prop="productCode" label="产品编号" width="180"></el-table-column>
    <el-table-column prop="productName" label="产品名称" width="180"></el-table-column>
    <el-table-column prop="num" label="库存数量" width="180"></el-table-column>
    <el-table-column prop="poNum" label="采购在途数" width="180"></el-table-column>
    <el-table-column prop="soNum" label="销售在途数" width="180"></el-table-column>
  </el-table>
  <el-pagination
          background
          layout="sizes, prev, pager, next, jumper, ->, total, slot"
          :total="totalRecord"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[6,10,15,20]"
          @current-change="handleCurrentChange"
          @size-change="handleSize">
  </el-pagination>

  <el-dialog title="销售单明细" :visible.sync="dialogTableVisible" width="840">
    <el-table :data="gridData">
      <el-table-column property="ProductCode" label="销售单编号" width="180"></el-table-column>
      <el-table-column property="productName" label="商品名称" width="140"></el-table-column>
      <el-table-column property="unitPrice" label="单价" width="120"></el-table-column>
      <el-table-column property="num" label="数量" width="120"></el-table-column>
      <el-table-column property="unitName" label="单位" width="120"></el-table-column>
      <el-table-column property="itemPrice" label="产品总价" ></el-table-column>
    </el-table>
  </el-dialog>
</div>

<script>
  window.onload = function () {
    let vm = new Vue({
      el: "#app",
      data:{
        labelPosition:"left",
        dialogTableVisible:false,
        dialogFormVisible:false,
        tableData:[],
        options:[],
        totalRecord:0,
        currentPage:1,
        pageSize:6,
        gridData:[],
        form:{
          minNum:0,
          maxNum:0,
          productCode:"",
          productName:"",
        },
        customersForm:{//客户信息
          customers:[],
          customerCode: "",
          productName:""
        },
      },
      methods:{
        init:function (){
          this.onsubmit(this.currentPage,this.pageSize);
        },
        handleCurrentChange:function (val){
          this.currentPage = val;
          this.onsubmit(this.currentPage,this.pageSize);
        },
        handleSize:function (val){
          this.pageSize = val;
          this.currentPage = 1;
          this.onsubmit(this.currentPage,this.pageSize);
        },
        //展示明细表
        showDetails:function (ProductCode){
          let that = this;
          this.dialogTableVisible = true;
          axios.get("getSoItemsBySoId/"+ProductCode).then(function (resp){
            console.log(resp.data.data)
            that.gridData = resp.data.data;
          });
        },
        onsubmit:function (cup,pSize){
          let that = this;
          axios.get("queryStockCondition?productCode="+this.form.productCode+"&productName="+this.form.productName+"&minNum="+this.form.minNum+"&maxNum="+this.form.maxNum+"&currentPage="+cup+"&pageSize="+pSize).then(function (resp){
            that.tableData = resp.data.data.lists;
            that.totalRecord = resp.data.data.totalRecord;
          });

          // axios.get("getCustomerMassage").then(function (resp){
          //   that.customersForm.customers = resp.data.data;
          // });
        },
        search:function (){
          this.onsubmit(1,this.pageSize,this.customerCode);
        },
        clear:function (){
          this.form.productCode = this.form.productName = "";
          this.form.minNum=this.form.maxNum = 0;
          this.onsubmit(1,this.pageSize);
        }
      }
    });

    vm.init();
  }
</script>